<script setup lang="ts">
import { ref, onMounted } from 'vue'

const props = defineProps({
  color: {
    type: String,
    default: 'unset'
  }
})

let width = ref(0)
let height = ref(0)
let resizeObserver
let elRef = ref()

const resize = () => {
  if (elRef.value) {
    let style = getComputedStyle(elRef.value)
    width.value = parseInt(style.getPropertyValue('width'))
    height.value = parseInt(style.getPropertyValue('height'))
  }
}

onMounted(() => {
  resizeObserver = new window.ResizeObserver((entries) => resize())
  resizeObserver.observe(elRef.value)
})
</script>

<template>
  <svg ref="elRef" class="border" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" :width="width" :height="height" fill="none" stroke-width="1" :stroke="color"></rect>
  </svg>
</template>

<style scoped>
.border {
  width: 100%;
  height: 100%;
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
}
</style>
